<template>
  <div class="fillcontain" v-loading="loading">
    <bt-col-header title="场景案例"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="120px">
        <div class="row">
          <div class="col-md-6">
            <el-form-item label="所属场景">
              <el-select v-model="dataForm.sceneIdentify" filterable placeholder="请选择">
                <el-option v-for="item in scenes" :key="item.sceneIdentify" :label="item.sceneName" :value="item.sceneIdentify">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-md-6">
            <el-form-item label="案例名称">
              <el-input v-model="dataForm.caseName" placeholder="案例名称" clearable></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="reset()">重置</rich-button>
          </div>
        </div>
      </el-form>  
      <div class="">
        <!-- 操作按钮 -->
        <div class="btn-padding left">
          <el-button type="info" plain @click="addOrUpdateHandle()" icon="circle-plus">新增
            </el-button>
            <el-button type="info" plain @click="test()">测试
            </el-button>
        </div>
            

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" header-align="center" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="sceneIdentify" header-align="center" align="center" label="所属场景">
            </el-table-column>
            <el-table-column prop="caseName" header-align="center" align="center" label="案例名称">
            </el-table-column>
            <el-table-column prop="remark" header-align="center" align="center" label="备注">
            </el-table-column>

            <el-table-column prop="isEffect" header-align="center" align="center" label="状态">
              <template slot-scope="scope">
                {{scope.row.isEffect | isEffectFilter}}
              </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改
                </el-button>
                <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用
                </el-button>
                <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="show(scope.row)">查看报文
                </el-button>
                <el-button v-if="scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination 
            class="float-right mt-2"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle" 
            :current-page="page.pageIndex" 
            :page-sizes="[10, 20, 50, 100]" 
            :page-size="page.pageSize" 
            :total="page.totalPage" 
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
              
        </div>
      </div>
    </div>
    

    

    <el-dialog title="报文示例" width="80%" :close-on-click-modal="false" :visible.sync="templateVisible">
      <el-row>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>请求报文</span>
            </div>
            <div class="temp_content">
              <pre>{{reqContent}}</pre>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>返回报文</span>
            </div>
            <div class="temp_content">
              <pre>{{resContent}}</pre>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

  </div>
</template>

<script>
import { pageData, updateData } from "@/api/testCase/interfaceCase";
import AddOrUpdate from "./add-or-update";
import { listScene } from "@/api/ruleConfig/scene";
import constant from "../../../../../api/constant";

export default {
  data() {
    return {
      editableTabsValue: "0",
      reqContent: "",
      resContent: "",
      templateVisible: false,
      multipleSelection: [],
      caseSelection: [],
      scenes: [],
      loading: false,
      showTestVisbale: false,
      dataForm: {
        caseName: "",
        sceneIdentify: "",
      },
      testForm: {
        environ: "",
        flow: "",
      },
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },
    };
  },
  components: {
    AddOrUpdate,
  },
  activated() {
    this.getDataList();
    this.listSceneData();
  },
  methods: {
    tabclick() {
      // console.log();
    },
    show(data) {
      this.reqContent = data.reqContentJson
        ? JSON.stringify(JSON.parse(data.reqContentJson), null, 4)
        : "";
      this.resContent = data.reContentJson
        ? JSON.stringify(JSON.parse(data.reContentJson), null, 4)
        : "";
      this.templateVisible = true;
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
    },
    //启用禁用
    edit(row) {
      let data = row;
      if (row.isEffect === "0") {
        data.isEffect = "1";
      } else {
        data.isEffect = "0";
      }
      updateData(JSON.stringify(data)).then((res) => {
        this.getDataList();
      });
    },
    reset() {
      this.dataForm = {
        caseName: "",
        sceneIdentify: "",
      };
    },
    // 获取场景信息
    listSceneData() {
      let params = {};
      listScene(params).then((res) => {
        this.scenes = res.data.data;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        sceneIdentify: this.dataForm.sceneIdentify,
        caseName: this.dataForm.caseName,
      };
      pageData(params)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          this.dataList = res.data.data.list;
          console.log(res.data.data)
          this.page.totalPage = res.data.data.totalCount;
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      constant.clearTag(this);
      if (id) {
        this.$router.push({
          path: "/drools-testCase/interfaceCase/add-or-update/" + id,
        });
      } else {
        this.$router.push({
          path: "/drools-testCase/interfaceCase/add-or-update",
        });
      }
    },
    // 测试
    test() {
      if (!this.multipleSelection.length) {
        this.$message.error('请选择场景案例！');
        return
      }
      this.$router.push({
        path: "/drools-testCase/interfaceCase/test",
        query: {
          multipleSelection: JSON.stringify(this.multipleSelection),
        },
      });
    },
  },
  filters: {
    isEffectFilter: function (value) {
      return constant.getLabel(value, constant.ruleConfig.isEffects);
    },
  },
};
</script>
<style scoped>
body .el-table th.gutter {
  display: table-cell !important;
}

.keys {
  word-wrap: break-word;
  word-break: normal;
}
.temp_content {
  height: 200px;
  overflow-y: auto;
}
.cont-tags {
  height: 40px;
  background-color: #f2f2f2;
}
</style>
